<template>
  <div class="base-setting">
    <pageHeader
      :title="title"
      :breadCrumb="breadCrumb"
      :isShowBtn="false"
    ></pageHeader>
    <a-tabs v-model="tabsKey" @change="changeTabsKey">
      <a-tab-pane
        v-for="item in baseSettingType"
        :key="item.key"
        :title="item.titile"
      >
      </a-tab-pane>
    </a-tabs>
    <div class="base-setting-warp">
      <div v-for="(item, index) in setting" :key="index">
        <settingWrap
          @goDetail="goDetail(item)"
          :name="item.name"
          :description="item.description"
          :icon="item.icon"
        ></settingWrap>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import pageHeader from '@/components/page-header/index.vue';
  import settingWrap from '@/components/setting-wrap/index.vue';
  import { useRouter } from 'vue-router';

  const router = useRouter();
  const title: string = '基础设置';
  const tabsKey = ref();

  const breadCrumb: string[] = ['库存管理', '基础设置'];

  let setting = ref([
    {
      name: '仓库类型',
      description: '-主要用于配置合同类型',
      icon: 'icon-settings',
      path: 'WarehouseType',
    },
  ]);

  const baseSettingType = [
    { titile: '仓库设置', key: '1' },
    { titile: '物料/产品设置', key: '2' },
    { titile: '入库设置', key: '3' },
    { titile: '出库设置', key: '4' },
    // { titile: '调拨设置', key: '5' },
    // { titile: '盘点设置', key: '6' },
  ];

  const goDetail = (item: any) => {
    router.push({
      name: item.path,
    });
  };

  const changeTabsKey = (key) => {
    if (key === '1') {
      setting.value = [
        {
          name: '仓库类型',
          description: '主要用于配置仓库类型',
          icon: 'icon-settings',
          path: 'ProductCategory',
        },
      ];
    } else if (key === '2') {
      setting.value = [
        {
          name: '物料/产品分类',
          description: '主要用于配置物料/产品分类',
          icon: 'icon-settings',
          path: 'MaterialManagementProductCategory',
        },

        {
          name: '计量单位',
          description: '主要配置计量单位',
          icon: 'icon-settings',
          path: 'MaterialManagementUnitSetting',
        },
      ];
    } else if (key === '3') {
      setting.value = [
        {
          name: '采购收货单',
          description: '-主要用于配置采购收货单',
          icon: 'icon-settings',
          path: 'PurchaseReceipt',
        },
        {
          name: '采购出库单',
          description: '-主要用于配置采购出库单',
          icon: 'icon-settings',
          path: 'PurchaseOutbound',
        },
        {
          name: '采购收货编号',
          description: '-主要用于配置采购收货编号生成',
          icon: 'icon-settings',
          path: 'PurchaseReceiptNumber',
        },
        {
          name: '采购入库编号',
          description: '-主要用于配置采购入库编号生成',
          icon: 'icon-settings',
          path: 'PurchaseWarehousingNumber',
        },
      ];
    } else if (key === '4') {
      setting.value = [
        {
          name: '销售出库编号',
          description: '主要用于配置销售出库编号生成',
          icon: 'icon-settings',
          path: 'SalesOutboundNumber',
        },
        {
          name: '销售发货编号',
          description: '主要用于配置销售发货编号生成',
          icon: 'icon-settings',
          path: 'SalesInvoiceNumber',
        },
      ];
    }
  };
</script>

<style scoped lang="less">
  .base-setting {
    &-warp {
      display: flex;
      flex: 1;
      flex-wrap: wrap;
    }
  }
</style>
